<template>
	<view class="app">
		<map id="map1" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
		<!-- 输入框 -->
		<view class="input" @click="natoSearch">
			<!-- 图标 -->
			<view class="input-icon">
				<image src="https://lt.caomei.zone/xcxstatic/static/img/search.png" mode=""></image>
			</view>
			<!-- 输入框 -->
			<view class="input-entry">
				<input type="text" disabled="disabled" readonly="readonly" placeholder="搜索人脉" value="" />
			</view>
		</view>
		<!-- <image src="../../static/peisong/marker_kehu.png" mode=""></image> -->
		<!-- 悬浮按钮 -->
		<view class="fab" @click="clickShow = !clickShow">
			<uni-icons type="plusempty" :class="clickShow?'trsfrting':'stands'" color="#FFFFFF" size="35"></uni-icons>
			<view :class="clickShow?'postrue sxcs':'postrue'" @click="natoPexset()">
				我的名片
			</view>
		</view>
		<!-- <uni-fab ref="fab" :pattern="patternt" :content="content" horizontal="right" :vertical="vertical"
			:direction="direction" @trigger="trigger"/> -->
		<view class="address">
			<uni-icons type="location-filled" color="#994275" size="35"></uni-icons>
		</view>
		<view class="tabbar">
			<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				clickShow: false,
				opt: {},
				uniMapContext: null,
				latitude: null,
				longitude: null,
				positions: [],
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff',
					mapId: "map1", //地图id
				},
			}
		},
		onReady() {

			this.creatMap();
			// this.getLocation();
		},
		onLoad: function (opt){
			this.opt = app.getopts(opt);
			wx.getLocation({
				success: (res) => {
					console.log(res)
					this.latitude = res.latitude;
					this.longitude = res.longitude
					app.post("ApiMingpian/mingpianlist", {
						latitude: res.latitude,
						longitude: res.longitude
					}, (res) => {
						console.log(res)
						res.data[0].latitude = 28.22778;
						res.data[0].longitude = 112.93886;
						this.positions = res.data
						this.addMarkers()
					})
					// let latitude = res.latitudelet longitude = res.longitude
				}
			})
		},
		methods: {
			natoSearch() {
				uni.navigateTo({
					url: '../acquainSearch/acquainSearch'
				})
			},
			natoPexset() {
				uni.navigateTo({
					url: "../../pagesExt/mingpian/edit"
				})
			},
			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			// 获取坐标
			getLocation() {
				// uni.createMapContext(this.mapId).
			},
			// 创建地图
			creatMap() {
				this.uniMapContext = uni.createMapContext("map1", this);
				// this.uniMapContext.getCenterLocation({
				//         success(res) {
				// 			this.latitude = res.latitude;
				// 			this.longitude = res.longitude;
				// 			console.log(this.latitude)
				//           console.log('地图中心经纬度：', res.longitude, res.latitude);
				//         }
				//       });
				this.uniMapContext.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 60,
					complete(res) {
						console.log('initMarkerCluster', res)
					}
				});
				this.uniMapContext.on("markerClusterCreate", (e) => {
					console.log("markerClusterCreate", e);
				});

			},
			// 添加
			addMarkers() {
				let positions = this.positions
				// for(let i=0;i<this.positions.length;i++){
				// 	console.log(this.positions[i])
				// 	positions.push(this.positions[i])
				// }
				// console.log(positions)
				// this.positions

				const markers = []

				positions.forEach((p, i) => {
					console.log(i)
					markers.push(
						Object.assign({}, {
							id: i + 1,
							iconPath: p.headimg,
							width: 50,
							height: 50,
							borderRadius: 80,
							// joinCluster: true, // 指定了该参数才会参与聚合

						}, p)
					)
				})
				this.uniMapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			},
			fabClick() {
				uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.map {
		width: 100%;
		height: 100vh;
	}

	/* 输入框 */
	.input {
		width: 94%;
		position: absolute;
		display: flex;
		top: 8%;
		height: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #FFFFFF;
		box-shadow: 0 0 4rpx 2rpx #FFF6F3;
		border-radius: 15rpx;

		.input-entry {
			width: 84%;
			height: 100%;

			input {
				width: 100%;
				height: 100%;
			}
		}

		.input-icon {
			width: 16%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 50%;
				height: 60%;
			}
		}
	}

	.fab {
		position: absolute;
		bottom: 15%;
		right: 5%;
		border-radius: 100%;
		box-shadow: 0 0 4rpx 4rpx #C9C9C9;
		width: 100rpx;
		height: 100rpx;
		background-color: #994275;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: all .3s;
		animation-name: trscler;
	}

	.stands {
		animation-name: huixianTrsf;
		animation: all .3s;
		transform: rotate(0deg);
	}

	.trsfrting {
		animation: all .3s;
		animation-name: trsf;
		transform: rotate(45deg);
	}

	.postrue {
		position: absolute;
		width: 250rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		right: calc(100% + 40rpx);
		border-radius: 15rpx;
		animation: all .3s;
		transform: scaleX(0);
		animation: all .3s;
		animation-name: huixianShow;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		box-shadow: 0 0 4rpx 2rpx #dfdfdf;
	}

	.postrue::after {
		content: "";
		position: absolute;
		left: calc(100% - 20rpx);
		width: 40rpx;
		height: 30rpx;
		background-color: #FFFFFF;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}

	@keyframes huixianShow {
		0% {
			transform: scaleX(1);
		}

		100% {
			transform: scaleX(0);
		}
	}

	.sxcs {
		animation: all .3s;
		animation-name: postrueShow;
		transform: scaleX(1);
	}

	@keyframes postrueShow {
		0% {
			transform: scaleX(0);
		}

		100% {
			transform: scaleX(1);
		}
	}

	@keyframes huixianTrsf {
		0% {
			transform: rotate(45deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}

	@keyframes trsf {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(45deg);
		}
	}

	.address {
		position: absolute;
		bottom: 15%;
		left: 5%;
	}
</style>